<template>
  <ContainerGroup>
    <Container style="margin-bottom:10px;">
      <FilterForm
        ref="filterForm"
        :elements="filterElements"
        @submit="handleSearch"
        @reset="handlerReset"
      >
        <Button
          type="info"
          icon="add"
          @click="handleAdd"
        >新增</Button>
      </FilterForm>
    </Container>
    <Container height="fill" display="flexY">
      <Table
        :columns="tableColumns"
        :loading="tableLoading"
        :data="tableData"
        :index="true"
        :pagination="{
          total: total,
          current: currentPage,
          pageSize: pageSize,
        }"
        @paginationChange="pageChange"
      >
        <template #caozuo="{row}">
          <Tooltip content="删除" icon="delete" @click="handleDelete(row)" />
        </template>
      </Table>

      <!-- 新增 -->
      <Drawer
        :visible="drawerFrom"
        :title="title"
        :footer-btns="drawerController"
        width="30%"
        @cancel="drawerCancel"
        @submit="drawerSubmit"
      >
        <div class="drawer-from">
          <el-form
            ref="formData"
            label-width="80px"
            :model="formData"
            :rules="rules"
          >
            <el-form-item label="项目分类" prop="projectCategory">
              <el-select v-model="formData.projectCategory" placeholder="请选择" clearable @change="handleChange">
                <el-option
                  v-for="item in projectOptions"
                  :key="item.entryCode"
                  :label="item.entryName"
                  :value="item.entryCode"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="人员" prop="personnel">
              <el-select v-model="formData.personnel" filterable placeholder="请选择" clearable>
                <el-option
                  v-for="item in personnelOptions"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                />
              </el-select>
            </el-form-item>

          </el-form>
        </div>
      </Drawer>
    </Container>
  </ContainerGroup>
</template>
<script>
import { mainPage, projectList, userList, save, removeById } from '@/apis/specialFunds/systermSetting'
export default {
  name: 'ProjectCategory', // 项目类别配置
  data() {
    return {
      filterElements: [
        {
          key: 'personnel',
          type: 'input',
          label: '人员',
          value: ''
        },
        {
          key: 'projectCategory',
          type: 'select',
          label: '项目类别',
          value: '',
          itemLabel: 'entryName',
          itemValue: 'entryCode',
          options: []
        }
      ],
      tableColumns: [
        {
          title: '项目类别编号',
          dataIndex: 'entryCode'
        },
        {
          title: '项目类别名称',
          dataIndex: 'entryName'
        },
        {
          title: '工号',
          dataIndex: 'userId'
        },
        {
          title: '姓名',
          dataIndex: 'userName'
        },
        {
          title: '操作',
          dataIndex: 'caozuo',
          type: 'otherTag'
        }
      ],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableLoading: false,
      tableData: [],
      newCondition: {},
      drawerFrom: false,
      title: '',
      drawerController: [
        {
          text: '确认',
          type: 'primary',
          trigger: 'submit'
        }, {
          text: '取消',
          type: 'info',
          trigger: 'cancel'
        }
      ],
      formData: {
        projectCategory: '',
        personnel: ''
      },
      rules: {
        projectCategory: [{ required: true, message: '请选择项目类别', trigger: 'change' }],
        personnel: [{ required: true, message: '请选择人员', trigger: 'change' }]
      },
      projectOptions: [],
      personnelOptions: []
    }
  },
  created() {
    this.getProjectList()
  },
  methods: {
    // 项目类别下拉框
    getProjectList() {
      projectList().then(res => {
        if (res.data.code === 200) {
          this.filterElements[1].options = res.data.data
          this.projectOptions = res.data.data
        }
      })
    },
    // 查询
    handleSearch(value) {
      this.newCondition = value
      this.currentPage = 1
      this.getData()
    },
    // 重置
    handlerReset() {
      this.handleSearch()
    },
    // 分页
    pageChange(payload) {
      this.currentPage = payload.current
      this.pageSize = payload.pageSize
      this.getData()
    },
    // 数据列表
    getData() {
      const param = {
        entryCode: this.newCondition?.projectCategory,
        userName: this.newCondition?.personnel,
        num: this.currentPage,
        size: this.pageSize
      }
      this.tableLoading = true
      mainPage(param).then(res => {
        this.tableLoading = false
        if (res.data.code === 200) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 删除
    handleDelete(row) {
      console.log('111111', row)
      this.$confirm({
        content: '是否确认删除？',
        title: '温馨提示',
        okFn: (res) => {
          const id = row.id
          removeById(id).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.msg)
              // 请求成功后刷新数据
              this.getData()
            } else {
              this.$message.error(res.data.msg)
            }
          })
        },
        cancelFn: (res) => {
          console.log('取消')
        }
      })
    },
    handleChange(value) {
      this.formData.personnel = ''
      this.postUserList(value)
    },
    // 人员下拉
    postUserList(value) {
      const param = {
        entryCode: value,
        selectAll: this.formData.personnel
      }
      userList(param).then(res => {
        if (res.data.code === 200) {
          this.personnelOptions = res.data.data
        }
      })
    },
    // 新增
    handleAdd() {
      this.drawerFrom = true
      this.title = '项目数据权限配置'
    },
    drawerSubmit() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          const param = {
            entryCode: this.formData.projectCategory,
            userId: this.formData.personnel,
            userName: this.personnelOptions.find(item => item.userId === this.formData.personnel)?.userName
          }
          save(param).then(res => {
            if (res.data.code === 200) {
              this.getData()
              this.drawerCancel()
              this.$message.success(res.data.msg)
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }
      })
    },
    drawerCancel() {
      this.drawerFrom = false
      this.$refs.formData.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.drawer-from {
  padding: 10px;
}
</style>
